<template>
  <div class="anthology-list">
    <ul class="ul-anthology-list">
      <li class="li-anthology-list" v-for="(val,index) in this.anthology_list">
        <article class="anthology-title" @click=getArticleAll(index)>{{val.anthology}}</article>
      </li>
    </ul>
  </div>
</template>

<script>
  import API from '../../API';
  export default {
    name: "anthology",
    data:function () {
      return {
        anthology_list:[]
      }
    },
    mounted:async function(){
      this.anthology_list = await this.getAnthology();
    },
    methods:{
      // 获取文集名
      getAnthology:async function () {
        const anthology =  await API.post.getAnthology();
        const {result} = anthology.data;
        return result;
      },
      // 文章文字与内容
      getArticleAll: function (index) {
        const {author,anthology} = this.anthology_list[index];
        API.post.getArticleAll({author,anthology}).then((res)=>{
          this.$emit('getArticle',res.data.result);
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .li-anthology-list{
    list-style-type:none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
  }
  .anthology-title{
    display: inline;
  }
  .anthology-title:hover{
    color: #9a9a9a;
    cursor: pointer;
    text-decoration: underline black;
  }
</style>
